/* 该文件时Vue中的路由器文件，路由器管理着所有路由 */
import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'

Vue.use(VueRouter);

const router = new VueRouter({
    routes:[
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'/home/message',
                    component:Message,
                    children:[
                        {
                            //接收params参数 声明接收三个参数：占位符
                            //path:'/home/message/detail/:id/:title/:content',
                            path:'/home/message/detail/:id',//接收query参数，不需要提前声明
                            component:Detail,
                            name:'xiangqing',
                            //props:{carName:'酷路泽'},//通过props映射自定义静态数据
                            //props:true,//将params参数映射为props传递给路由组件
                            props(route){
                                const {id} = route.params;
                                const {title,content} = route.query;

                                return {
                                    id,title,content
                                }
                            }

                        },
                    ]
                },                
                {
                    path:'/home/news',
                    component:News
                }
            ]
        },
        {
            path:'/about',
            component:About
        },
    ],
});

export default router;